<template>
	<view :style="skin" class="content overdueRecord">
		<view class="overdueList">
			<view class="overdueListLeft">
				<u--image shape="circle" :src="obj.avatar" width="75px" height="75px"></u--image>
				<block>
					<!-- <view class="leftTips">
						ID:{{obj.id}}
					</view> -->
					<view class="leftTips">
						{{$t('lease.rentalTimes')}}:{{obj.rentNum}}
					</view>
					<view class="leftTips">
						{{$t('lease.overdueNumber')}}:{{obj.overdueNum}}
					</view>
				</block>

			</view>
			<view class="overdueListRight">
				<view class="rightTips">
					{{$t('lease.productModel')}}: {{obj.productModel}}
				</view>
				<view class="rightTips">
					{{$t('lease.productID')}}: {{obj.productId}}
				</view>
				<view class="rightTips">
					{{$t('lease.name')}}: {{obj.nickname}}
				</view>
				<view class="rightTips" @click="handleCall(obj.phone)">
					{{$t('lease.phone')}}: {{obj.phone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
				</view>
				<view class="rightTips">
					{{$t('lease.address')}}: {{obj.userAddress}}
				</view>
				<view class="rightTips">
					{{$t('lease.surety')}}: {{obj.bondsMan}}
				</view>
				<view class="rightTips" @click="handleCall(obj.bondsManPhone)">
					{{$t('lease.suretyPhone')}}: {{obj.bondsManPhone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
				</view>
				<view class="rightTips">
					{{$t('lease.overdueTime')}}: {{obj.overdueDay}} H
				</view>
				<view class="rightTips">
					{{$t('lease.remindNumber')}}: {{obj.remind}} 
				</view>

			</view>
		</view>

		<view class="history">
			<view class="hisList" v-for="(item,index) in history" :key="index">
				<view class="" v-if="index == 0">
					{{$t('lease.overdueTracking1')}}
				</view>
				<view class="" v-else-if="index == 1">
					{{$t('lease.overdueTracking2')}}
				</view>
				<view class="" v-else-if="index == 2">
					{{$t('lease.overdueTracking3')}}
				</view>
				<view class="">
					{{$t('lease.overdueReason')}}:{{item.overReason}}
				</view>
				<view class="">
					{{$t('lease.returnTime')}}:{{item.backExpect}} 
				</view>
				<view class="">
					{{$t('lease.detailed')}}:{{item.details}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getLeaseToId
	} from '@/utils/sql/sqllease.js'
	export default {
		data() {
			return {
				obj: {},
				history:[]
			};
		},
		onLoad(options) {
			console.log(options);
			getLeaseToId(options.leaseId).then(res => {
				console.log(res);
				if (res.code == 0) {
					this.obj = res.data[0]
					this.history = JSON.parse(this.obj.history)
				}
			})
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		methods: {
			handleCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //要拨打的手机号
					success: (res) => {
						console.log("调用成功")
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.overdueRecord {
		padding: 16px;
		box-sizing: border-box;
		height: 100%;

		.overdueList {
			width: 100%;
			height: 200px;
			display: flex;
			background-color: #fff;

			margin-bottom: 16px;

			.overdueListLeft {
				width: 102px;
				height: calc(100% - 16px);
				margin-top: 8px;
				border-right: 1px solid #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;

				.leftTips {
					width: 96px;
					line-height: 26px;
				}
			}

			.overdueListRight {
				font-size: 14px;
				color: #101010;
				padding-left: 16px;
				box-sizing: border-box;

				.rightTips {
					line-height: 20px;

					.iconRight {
						float: right;
					}
				}

				.popupRightTips {
					line-height: 26px;

					.iconRight {
						float: right;
					}
				}
			}
		}
	}
</style>